import React, { Component } from 'react';
import { 
	Grid,
	NavBar,
	Icon,
} from 'antd-mobile';
import { Link, Route } from 'react-router-dom';

import CarouselCustom from '../CarouselCustom';
import CommendList from '../../containers/CommendList';



import './index.css';

import jieSuan from './images/jieSuan.png';
import zhichu from './images/zhichu.png';
import shouru from './images/shouru.png';
import youhui from './images/youhui.png';


class Home extends Component {
	constructor(props) {
		super(props);
		this.state = {
			list: [
				{ name: "结算", icon: jieSuan,  nav: '/accounting' },
				{ name: "支出", icon: zhichu, nav: '' },
				{ name: "收入", icon: shouru,  nav: '' },
				{ name: "优惠", icon: youhui,  nav: '' },

			]
		}
	}
	render() {
		return (
			<div>
				<NavBar
					style={{backgroundColor: "#B91818"}}
				>
					彪锅串串
				</NavBar>
			    <CarouselCustom />
			
				<Grid data={this.state.list}
					columnNum={4}
					hasLine={false}
					renderItem={dataItem => (
					<Link to={ dataItem.nav ? dataItem.nav : ""}>
						<div style={{ padding: '12.5px' }}>
							<img src={dataItem.icon} style={{ width: '60.5%', height: '60.5%' }} alt="" />
							<div style={{ color: '#888', fontSize: '14px', marginTop: '12px' }}>
								<span>{dataItem.name}</span>
							</div>
						</div>
					</Link>
					)}
				/>

				<CommendList />
			</div>
		)
	}
}

export default Home;